<html>
	<head>
		<script src="js/jquery-1.9.1.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/bootstrap-datetimepicker.js"></script>
		<script src="js/bootstrap-editable.js"></script>
		
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/bootstrap-editable.css" rel="stylesheet">     		

	</head>
	<body>	
		<h1 style="padding:50px">X-Editable</h1>
		<table style="clear: both" class="table table-bordered table-striped" id="user">
			<tbody> 
				<tr>         
					<td width="35%">Simple text field</td>
					<td width="65%"><a data-title="Enter username" data-pk="1" data-type="text" id="username" href="#" class="editable editable-click">superuser</a></td>
				</tr>
				<tr>         
					<td>Empty text field, required</td>
					<td><a data-title="Enter your firstname" data-placeholder="Required" data-placement="right" data-pk="1" data-type="text" id="firstname" href="#" class="editable editable-click editable-empty">Empty</a></td>
				</tr>  
				<tr>         
					<td>Select, local array, custom display</td>
					<td><a data-title="Select sex" data-value="" data-pk="1" data-type="select" id="sex" href="#" class="editable editable-click" style="color: gray;">not selected</a></td>
				</tr>
				<tr>         
					<td>Select, remote array, no buttons</td>
					<td><a data-title="Select group" data-source="/groups" data-value="5" data-pk="1" data-type="select" id="group" href="#" class="editable editable-click">Admin</a></td>
				</tr> 
				<tr>         
					<td>Select, error while loading</td>
					<td><a data-title="Select status" data-source="/status" data-value="0" data-pk="1" data-type="select" id="status" href="#" class="editable editable-click">Active</a></td>
				</tr>  
					 
				<tr>         
					<td>Datepicker</td>
					<td>
					
					<span class="notready">not implemented for Bootstrap 3 yet</span>
					
					</td>
				</tr>
				<tr>         
					<td>Combodate (date)</td>
					<td><a data-title="Select Date of birth" data-pk="1" data-template="D / MMM / YYYY" data-viewformat="DD/MM/YYYY" data-format="YYYY-MM-DD" data-value="1984-05-15" data-type="combodate" id="dob" href="#" class="editable editable-click">15/05/1984</a></td>
				</tr> 
				<tr>         
					<td>Combodate (datetime)</td>
					<td><a data-title="Setup event date and time" data-pk="1" data-viewformat="MMM D, YYYY, HH:mm" data-format="YYYY-MM-DD HH:mm" data-template="D MMM YYYY  HH:mm" data-type="combodate" id="event" href="#" class="editable editable-click editable-empty">Empty</a></td>
				</tr>                                                              
									
				<tr>         
					<td>Textarea, buttons below. Submit by <i>ctrl+enter</i></td>
					<td><a data-title="Enter comments" data-placeholder="Your comments here..." data-pk="1" data-type="textarea" id="comments" href="#" class="editable editable-pre-wrapped editable-click">awesomeuser!</a></td>
				</tr> 
				
				<tr>         
					<td>Twitter typeahead.js</td>
					<td><a data-title="Start typing State.." data-placement="right" data-pk="1" data-type="typeaheadjs" id="state2" href="#" class="editable editable-click">California</a></td>
				</tr>                       
									 
													
				<tr>         
					<td>Checklist</td>
					<td><a data-title="Select fruits" data-value="2,3" data-type="checklist" id="fruits" href="#" class="editable editable-click">peach<br>apple</a></td>
				</tr>

				<tr>         
					<td>Select2 (tags mode)</td>
					<td><a data-title="Enter tags" data-pk="1" data-type="select2" id="tags" href="#" class="editable editable-click">html, javascript</a></td>
				</tr>                    

				<tr>         
					<td>Select2 (dropdown mode)</td>
					<td><a data-title="Select country" data-value="BS" data-pk="1" data-type="select2" id="country" href="#" class="editable editable-click">Bahamas</a></td>
				</tr>  
				
				<tr>         
					<td>Custom input, several fields</td>
					<td><a data-title="Please, fill address" data-pk="1" data-type="address" id="address" href="#" class="editable editable-click"><b>Moscow</b>, Lenina st., bld. 12</a></td>
				</tr>                      
																											
				
			</tbody>
		</table>
	</body>

</html>